<template>
  <div class="login">
    <div class="login-container">
      <div class="login-form">
        <div class="form-header">
          <div class="title-with-logo">
            <img src="http://tc.mcshare.cn/LightPicture/2025/01/aede08d7a4422fe5.png" class="logo" alt="logo">
            <h3 class="title">星穹多功能系统</h3>
          </div>
          <p class="subtitle">欢迎使用B站扫码登录</p>
        </div>
        
        <div class="qrcode-container">
          <div v-if="qrCodeUrl" class="qrcode-box">
            <div class="qrcode-wrapper">
              <img :src="qrCodeUrl" alt="B站登录二维码">
              <div v-if="scanStatus === 'waiting'" class="scan-waiting-overlay">
                <div class="loading-spinner"></div>
                <span>已扫码，请点击确认登录</span>
              </div>
              <div v-if="scanStatus === 'scanned'" class="scan-success-overlay">
                <i class="el-icon-check"></i>
                <span>老高说你真他娘帅哦！</span>
              </div>
              <div class="scan-overlay" @click="getBilibiliQrCode">
                <i class="el-icon-refresh"></i>
                <span>点击刷新</span>
              </div>
            </div>
            <p class="scan-tip">
              <i class="el-icon-mobile-phone"></i>
              请使用哔哩哔哩App扫码登录
            </p>
          </div>
          <div v-else class="loading-box">
            <el-button type="primary" round @click="getBilibiliQrCode">
              <i class="el-icon-position"></i>
              获取登录二维码
            </el-button>
          </div>
        </div>
      </div>
      
      <div class="login-footer">
        <p class="copyright">
          Copyright © 2018-2024 mcshare.cn All Rights Reserved.
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getBilibiliQrCode, checkBilibiliQrCode, getBiliUserInfo } from "@/api/login";
import Cookies from 'js-cookie'

export default {
  name: "Login",
  data() {
    return {
      loginForm: {},
      loginRules: {},
      loading: false,
      redirect: undefined,
      qrCodeUrl: '',
      qrCodeTimer: null,
      scanStatus: '',
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    // 进入页面自动获取二维码
    this.getBilibiliQrCode();
  },
  methods: {
    async getBilibiliQrCode() {
      try {
        const res = await getBilibiliQrCode();
        console.log('二维码接口返回数据：', res);
        
        if (res.qrcode_base64 && res.qrcode_key) {
          this.qrCodeUrl = res.qrcode_base64;
          this.startQrCodePolling(res.qrcode_key);
        } else {
          this.$message.error('获取二维码数据格式错误');
          console.error('接口返回数据异常：', res);
        }
      } catch (error) {
        console.error('获取二维码出错，详细错误：', error);
        this.$message.error('获取二维码失败，请重试');
      }
    },
startQrCodePolling(qrcode_key) {
  this.qrCodeTimer = setInterval(async () => {
    try {
      const res = await checkBilibiliQrCode(qrcode_key);
      console.log('扫码状态检查结果：', res);
      
      const code = res.data?.code;
      const message = res.data?.message;
      
      if (code === 86090) {
        this.scanStatus = 'waiting';
        this.$message.info('已扫码，请在手机上点击确认登录');
      } else if (res.code === 0 && res.data && res.cookies) {
        // 立即清除定时器
        if (this.qrCodeTimer) {
          clearInterval(this.qrCodeTimer);
          this.qrCodeTimer = null;
        }

        this.scanStatus = 'scanned';
        const token = res.token;
        this.$store.commit('SET_TOKEN', token);
        Cookies.set('Admin-Token', token);
        
        this.$store.dispatch('GetInfo').then(() => {
          // 登录成功后直接刷新页面
          window.location.href = this.redirect || '/';
        }).catch(() => {
          this.$message.error('获取用户信息失败');
        });
      } else if (code === 86038) {
        // 二维码失效自动刷新
        clearInterval(this.qrCodeTimer);
        this.qrCodeUrl = '';
        this.$message.info('二维码已失效，正在刷新...');
        this.getBilibiliQrCode();
      }
    } catch (error) {
      console.error('检查扫码状态出错:', error);
      if (this.qrCodeTimer) {
        clearInterval(this.qrCodeTimer);
        this.qrCodeTimer = null;
      }
      this.qrCodeUrl = '';
      this.$message.error('检查扫码状态失败，请重新获取二维码');
    }
  }, 1000);
},

beforeDestroy() {
  if (this.qrCodeTimer) {
    clearInterval(this.qrCodeTimer);
    this.qrCodeTimer = null;
  }
},
    handleLoginSuccess() {
      this.$store.dispatch('Login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' }).then(() => {
          // 添加页面刷新
          window.location.reload();
        });
      });
    },
    handleBiliLoginSuccess(data) {
      // 存储token等登录信息
      setToken(data.token);
      // 跳转到首页并刷新
      this.$router.push({ path: '/' }).then(() => {
        window.location.reload();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background: url('http://tc.mcshare.cn/LightPicture/2024/12/53ef62fc3d3d9eb6.jpg') center/cover no-repeat fixed;
  
  .login-form {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    // 其他样式保持不变...
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('http://tc.mcshare.cn/LightPicture/2024/12/667f5cc7205ecae8.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);  // 30%的黑色遮罩实现虚化效果
    backdrop-filter: blur(8px);  // 添加模糊效果
    z-index: 0;
  }
  padding: 20px;

  .login-container {
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;  // 确保内容在遮罩层上方
  }

  .login-form {
    background: rgba(255, 255, 255, 0.15);  // 进一步降低背景透明度
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(255, 255, 255, 0.3);  // 添加内发光效果
    padding: 40px;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.4);  // 加粗边框并增加透明度
    position: relative;
    
    // 添加发光效果
    &::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 18px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1)
      );
      z-index: -1;
      filter: blur(4px);
    }

    .form-header {
      text-align: center;
      margin-bottom: 30px;

      .title-with-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        .logo {
          width: 40px;  // 调整 logo 大小
          height: 40px;
          margin-right: 10px;  // logo 和标题之间的间距
        }

        .title {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin: 0;
        }
      }

      .subtitle {
        font-size: 16px;
        color: #606266;
        margin: 10px 0 0;
      }
    }

    .qrcode-wrapper {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                  0 0 0 1px rgba(255, 255, 255, 0.3);  // 增加二维码边框
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25),
                    0 0 0 1px rgba(255, 255, 255, 0.4);
      }
    }

    .el-button {
      background: rgba(64, 158, 255, 0.8);
      border: none;
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      
      &:hover {
        background: rgba(64, 158, 255, 0.95);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .qrcode-container {
    .qrcode-box {
      .qrcode-wrapper {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          background: #fff;  // 确保二维码背景是白色
        }

        .scan-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: opacity 0.3s ease;

          i {
            font-size: 32px;
            color: #fff;
            margin-bottom: 8px;
          }

          span {
            color: #fff;
            font-size: 14px;
          }
        }

        .scan-success-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.95);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          animation: fadeIn 0.3s ease;
          
          i {
            font-size: 40px;
            color: #67C23A;
            margin-bottom: 12px;
          }
          
          span {
            color: #67C23A;
            font-size: 14px;
            text-align: center;
            padding: 0 20px;
            line-height: 1.5;
          }
        }

        .scan-waiting-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.95);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          animation: fadeIn 0.3s ease;
          
          .loading-spinner {
            width: 40px;
            height: 40px;
            margin-bottom: 12px;
            border: 3px solid #e6e6e6;
            border-top: 3px solid #409EFF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
          }
          
          span {
            color: #409EFF;
            font-size: 14px;
            text-align: center;
            padding: 0 20px;
            line-height: 1.6;
            font-weight: 500;
          }
        }
      }

      .scan-tip {
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        text-align: center;

        i {
          margin-right: 6px;
          font-size: 16px;
          vertical-align: middle;
        }
      }
    }

    .loading-box {
      text-align: center;
      padding: 40px 0;

      .el-button {
        padding: 12px 36px;
        font-size: 16px;
        background: rgba(64, 158, 255, 0.9);
        border: none;
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;

        &:hover {
          background: rgba(64, 158, 255, 1);
          transform: translateY(-2px);
        }

        i {
          margin-right: 8px;
        }
      }
    }
  }

  .login-footer {
    text-align: center;
    margin-top: 30px;

    .copyright {
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      margin: 0;
    }
  }
}

// 添加一些动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-form {
  animation: fadeIn 0.6s ease-out;
}

// 响应式设计
@media (max-width: 480px) {
  .login {
    padding: 15px;
    
    .login-form {
      padding: 30px 20px;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

